<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-monitor"></i>企业关系信息图 </span>
            <el-button type="primary" round >企业关系决策分析</el-button>
<!--            <el-button type="info" round>分布式资源分配</el-button>-->
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所属企业群体</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">链点名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所属链点位置</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">预算输出</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">交易次数</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">深圳市生产商AA有限公司</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">上游企业群1</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202106</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">上游</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">5165</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">西安制造商MM有限公司</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">中游企业群1</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202107</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">上游</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">货车制造</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">5165</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">西安制造商NN有限公司</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">中游企业群2</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202108</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">中游</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">电池制造</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">5165</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">上海市销售商FF有限公司</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">下游游企业群1</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.MJ202109</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">下游游</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">智能应用</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">5165</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 企业群关系图</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart1"></div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i>企业群交易次数</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart2"></div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>


<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    // this.getLoadEcharts();
    // this.openLoading();
    setTimeout(() => {
      this.getLoadEcharts1()
    }, 1000);
    setTimeout(() => {
      this.getLoadEcharts2()
    }, 1000);
  },
  methods: {
    getLoadEcharts1() {
      var myChart = this.$echarts.init(
        document.getElementById("echart1")
      );
      let points = [
        {
          name: '上游',
          symbolSize: 120,
          category: 0,
          x: 100,
          y: 300,
          fixed: true,
          // itemStyle: {
          //     normal: {
          //         color: '#FCBB5B',
          //         borderColor: '#FCBB5B',
          //         shadowColor: '#FCBB5B',
          //     },
          // },
          label: {
            normal: {
              show: true,
              fontSize: 30
            },
          },

        },
        {
          name: '中游',
          symbolSize: 120,
          category: 1,
          x: 500,
          y: 300,
          fixed: true,
          label: {
            normal: {
              show: true,
              fontSize: 30
            },
          },

        },

        {
          name: '下游',
          symbolSize: 120,
          category: 2,
          x: 800,
          y: 300,
          fixed: true,
          label: {
            normal: {
              show: true,
              fontSize: 30
            },
          },
        },
        {
          name: '深圳生产商AA\n有限公司',
          category: 0,

        },
        {
          name: '深圳生产商CC有限公司',

          category: 0,
        },
        {
          name: '深圳生产商BB有限公司',

          category: 0,
        },



        {
          name: '西安制造商LL有限公司',
          category: 1,

        },
        {
          name: '西安制造商MM有限公司',

          category: 1,
        },
        {
          name: '西安制造商NN有限公司',

          category: 1,
        },



        {
          name: '上海销售商DD有限公司',

          category: 2,
        },
        {
          name: '上海销售商HH有限公司',

          category: 2,
        },
        {
          name: '上海销售商FF有限公司',

          category: 2,
        },
        {
          name: '销售商GG有限公司',

          category: 2,
        },
      ];
      let links = [
        {
          source: '中游',
          target: '上游',
        },
        {
          source: '中游',
          target: '下游',
        },
        {
          source: '上游',
          target: '深圳生产商AA\n有限公司',
        },
        {
          source: '上游',
          target: '深圳生产商CC有限公司',
        },
        {
          source: '上游',
          target: '深圳生产商BB有限公司',
        },
        {
          source: '中游',
          target: '下游',
        },

        {
          source: '中游',
          target: '西安制造商LL有限公司',
        },

        {
          source: '中游',
          target: '西安制造商MM有限公司',
        },

        {
          source: '中游',
          target: '西安制造商NN有限公司',
        },

        {
          source: '下游',
          target: '销售商GG有限公司',
        },
        {
          source: '下游',
          target: '上海销售商DD有限公司',
        },
        {
          source: '下游',
          target: '上海销售商HH有限公司',

        },
        {
          source: '下游',
          target: '上海销售商FF有限公司',
        },

      ];
      var option = {
        // backgroundColor: '#1a4377',
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        //上游中游下游
        color: ['#83e0ff', '#45f5ce', '#b158ff'],
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 120,
            force: {
              repulsion: 1500,
              edgeLength: 130,
            },
            roam: true,
            label: {
              normal: {
                show: true,
                fontSize: 14
              },
            },
            data: points,
            links: links,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0,
              },
            },
            categories: [
              {
                name: '0',
                // itemStyle: {
                //     normal: {
                //         borderColor: '#04f2a7',
                //         borderWidth: 4,
                //         shadowBlur: 10,
                //         shadowColor: '#04f2a7',
                //         color: '#001c43',
                //     }
                // },

              },
              {
                name: '1',
                // itemStyle: {
                //     normal: {
                //         borderColor: '#04f2a7',
                //         borderWidth: 4,
                //         shadowBlur: 10,
                //         shadowColor: '#04f2a7',
                //         color: '#001c43',
                //     }
                // },


              },
              {
                name: '2',
                // itemStyle: {
                //     normal: {
                //         borderColor: '#04f2a7',
                //         borderWidth: 4,
                //         shadowBlur: 10,
                //         shadowColor: '#04f2a7',
                //         color: '#001c43',
                //     }
                // },

              },

            ]

            ,
          },
        ],
      };

      myChart.setOption(option);
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    getLoadEcharts2() {
      var myChart = this.$echarts.init(
        document.getElementById("echart2")
      );
      var option = {
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: {
          show: false,
          type: "value"
        },
        tooltip: {
          formatter: "{b}"
        },
        series: [{
          type: "graph",
          layout: "none",
          edgeSymbol: ["circle", "arrow"],
          edgeSymbolSize: [0, 20],
          edgeLabel: {
            normal: {
              show: true,
              position: "middle",
              textStyle: {
                fontSize: 14
              },
              formatter: "{c}次"
            }
          },
          zoom: 0.9,
          focusNodeAdjacency: true, // 指定的节点以及其所有邻接节点高亮
          roam: false, // 是否可拖拽

          lineStyle: {
            normal: {
              width: 2,
              shadowColor: "none",
              color: "#142F54",
              curveness: 0.1
            }
          },
          symbolSize: [100, 70],
          symbol: "roundRect",
          label: {
            show: true,
            formatter: function(params) {
              let c = params.data.username || "";
              let b = params.data.name;
              var str = "";
              if (c === "") {
                str = "{p|" + b + "}";
              } else {
                str = "{n|" + c + "}\n{p|" + b + "}";
              }
              return str;
            },
            rich: {
              p: {
                fontSize: 14,
                color: "#142F54",
                align: "center"
              },
              n: {
                height: 25,
                fontSize: 16,
                color: "#142F54",
                align: "center"
              }
            }
          },
          itemStyle: {
            normal: {
              color: "#F2F2F2",
              borderColor: "#707070",
              borderWidth: 2,
              shadowColor: "rgba(225,225,225,0.4)",
              shadowBlur: 10,
              shadowOffsetX: 10,
              shadowOffsetY: 10
            }
          },
          //上游中游下游
          color: ['#83e0ff', '#45f5ce', '#b158ff'],
          data: [{
            import: true,
            level: "first",
            username: "中游企业群1",
            name: "15625698563",
            itemStyle: {
              normal: {
                color: "#45f5ce"
              }
            },
            x: 0,
            y: 0
          },
            {
              import: false,
              level: "sconed",
              username: "上游企业群1",
              name: "17825690251",
              itemStyle: {
                normal: {
                  color: "#83e0ff"
                }
              },
              x: -200,
              y: 100
            },
            {
              import: false,
              level: "sconed",
              username: "下游企业群1",
              name: "15569865236",
              itemStyle: {
                normal: {
                  color: "#b158ff"
                }
              },
              x: 200,
              y: 100
            },
            {
              import: false,
              level: "third",
              username: "上游企业群2",
              name: "13256981457",
              itemStyle: {
                normal: {
                  color: "#83e0ff"
                }
              },
              x: -100,
              y: 200
            },
            {
              import: true,
              level: "third",
              username: "中游企业群2",
              name: "17814589651",
              itemStyle: {
                normal: {
                  color: "#EE6F0B"
                }
              },
              x: 100,
              y: 200
            }
          ],

          links: [{
            source: "15625698563",
            value: "5165 ",
            target: "17825690251"
          },
            {
              source: "17825690251",
              value: "5165 ",
              target: "15625698563"
            },
            {
              source: "15625698563",
              value: "5165 ",
              target: "15569865236"
            },
            {
              source: "15569865236",
              value: "5165 ",
              target: "13256981457"
            },
            {
              source: "17825690251",
              value: "5165 ",
              target: "13256981457"
            },
            {
              source: "17825690251",
              value: "5165 ",
              target: "17814589651"
            },
            {
              source: "15569865236",
              value: "5165 ",
              target: "17814589651"
            }
          ]
        }]
      };
      myChart.setOption(option);
    }
  }

};

</script>
<style scoped>
#echart1{
  width: 600px;
  height: 420px;
}
#echart2{
  width: 600px;
  height: 420px;
}
</style>


